<template>
  <div id="body_div">
    <headerdiv />
    <div id="login_imgs">
      <div class="login">
        <div class="login-title">请进行登录验证</div>
        <el-form
          label-position="left"
          label-width="80px"
          :model="formLabelAlign"
          label-suffix=":"
        >
          <el-form-item label="用户名" class="color">
            <el-input
              v-model="formLabelAlign.username"
              name="username"
              placeholder="请输入你的用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" class="color">
            <el-input
              v-model="formLabelAlign.password"
              name="password"
              type="password"
              placeholder="请输入你的密码"
            ></el-input>
          </el-form-item>
          <div class="login-button">
            <el-button type="primary" class="btn" @click="login">登录</el-button>
            <el-popover
              placement="top-start"
              title="使用说明"
              width="200"
              trigger="hover"
              content="如果您是第一次使用本产品,我们建议你先详细阅读使用说明,再使用本产品。"
            >
              <el-button slot="reference" class="btn" @click="Jumpinstructions">使用说明</el-button>
            </el-popover>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { userLogin } from "../network/index";
export default {
  name: "login",
  // inject:["reload"],//注入方法  更新页面
  data() {
    return {
      formLabelAlign: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      // this.$data.formLabelAlign.name得到data里面的数据并且进行判断
      if (
        this.$data.formLabelAlign.username == "" ||
        this.$data.formLabelAlign.password == ""
      ) {
        this.$router.push("register");
      } else {
        userLogin(this.formLabelAlign).then((res) => {
          // console.log(localStorage)
          // console.log(res)
          if (res.success == true) {
            // console.log(res)
            // 令牌
            const str = res.data;
            // 本地存储  localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
            localStorage.setItem("token", str);
            this.$message({
              message: "恭喜你,登录成功!",
              type: "success",
            });

            // 跳转到个人中心
            this.$router.push("personalcenter");
          } else {
            // console.log("出现错误...");
            this.$message.error("错了哦，请检查用户名和密码是否正确");
          }
        });
      }
    },
    Jumpinstructions() {
      // 跳转到使用说明
      this.$router.push("instructions");
    },
  },
  components: {
    headerdiv: () => import(/** */ "../components/header"),
  },
};
</script>
<style>
#login_imgs {
  width: 100%;
  background-image: url("../../static/imgs/index/bj000.jpg");
  height: 100vh;
  background-size: cover;
  background-position: 0px -250px;
  background-repeat: no-repeat;
  position: relative;
  /* border: 1px solid red; */
  margin-bottom: 15px;
  margin-top: 10px;
}
.login {
  width: 500px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.3);
  /* 居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  /* 左右留下空余 */
  padding: 0 50px;
}
.login-title {
  font-size: 35px;
  text-align: center;
  line-height: 100px;
  color: black;
  font-weight: bold;
}
.login-button {
  line-height: 50px;
  text-align: center;
}
.color .el-form-item__label {
  color: black;
}
.btn{
  width: 6vw;
  height: 5vh;
}
</style>